import  React, { useEffect, useState } from 'react'
import { View, Text } from '@tarojs/components'
import './index.scss'

// 属性id
type DATA_ITEM = {
  id: string,
  label: string,
  value: string
}
// 属性数据类型
type LACATION_DATA_ITEM ={
  data: DATA_ITEM[],
  type: string,
  label: string,
  value: string
}
// 样式数据类型
type STYLE_CHILD = {
  cmpBackground: VALUE,
  location:LACATION_DATA_ITEM,
  shape: LACATION_DATA_ITEM,

}
type STYLE = {
  label: string,
  type: string,
  child: STYLE_CHILD
}
// 值的数据类型
type VALUE = {
  label: string,
  type: string,
  value: string | number
}
// 值-值
type VALUE_VALUE = {
  child: VALUE_CHILD,
  label: string,
  type: string
}

type VALUE_CHILD = {
  text: VALUE,
}

interface Props {
  styles: STYLE;
  value: VALUE_VALUE;
};

// 做一个数据个映射
const styleTable = {
  cmpBackground: "backgroundColor",
  cmpInBackground: "backgroundColor",
  location: "textAlign",
  shape: "shape",
  titleColor: "color"
}

const HeSearch = (props: Props) => {
  const {styles, value} = props;
  const [comStyle, setComStyle] = useState({});
  const [inerStyle, setInerStylee] = useState({});


  const handleStyle = (child, model) => {
    let obj = {}; //处理外部view的样式
    let obj2 = {};  //处理内部view的样式
    for (let key in child) {
      const element = child[key];
      if(key == 'cmpBackground') {
        obj[styleTable[key]] = element.value;
      }
      else if(key == 'location' ) {
        obj2['textAlign'] = element.value
      }
      else if(key == 'cmpInBackground' || key =="titleColor") {
        obj2[styleTable[key]] = element.value
      }
      else if(styleTable[key] == 'shape') {
        if(element.value == "circular") {
          obj2['borderRadius'] = 34 + 'px'
        } else {
          obj2['borderRadius'] = 0
        }
      }
    }
    return {obj, obj2};
  }

  const searchClick = (str) => {
    console.log("----searchClick");
    console.log(str);
  }
  useEffect(() => {
    let {obj, obj2} = handleStyle(styles?.child, {});
    setComStyle(obj)
    setInerStylee(obj2)
  }, [styles]);

  return (
    <View onClick={() => {searchClick("searchClick")}} style={comStyle} className='he-search'>
      <View style={inerStyle} className='he-search-box'>{value.child.text.value}</View>
    </View>
  )
}

export default HeSearch;